<script setup lang="ts">
import { ref } from 'vue'
const list = ref([
  { id: 1, name: '《红楼梦》', author: '曹雪芹' },
  { id: 2, name: '《西游记》', author: '吴承恩' },
  { id: 3, name: '《水浒传》', author: '施耐庵' },
  { id: 4, name: '《三国演义》', author: '罗贯中' }
])

const del=(id:number)=>{
  //可以筛选除了传过来的id外的元素
  //然后在赋值即可
const  res =  list.value.filter(v=>v.id!==id)
list .value=res

}


</script>

<template>
  <!-- 
需求:1 获取列表
     2  根据id删除元素

   -->
    <div id="app">
    <h3>小黑的书架</h3>
    <ul>
      <li v-for="(item,index) in list " :key="item.id">
        <span>{{ item.name }}</span>
        <span>{{  item.author}}</span>
        <button @click="del(item.id)">删除</button>
        <!-- 方法二 -->
        <!-- <button @click="list.splice(index,1)">删除</button> -->
      </li>
    </ul>
  </div>

</template>

<style>

</style>
